<template>
    <div class="box_head">
        <el-dropdown trigger="click" @command="handUser">
            <div>
              <span class="el-dropdown-link">
                <el-avatar shape="circle" :size=28 :src="user.avatarUrl"/>
              </span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-user-solid" :command="1">个人信息</el-dropdown-item>
              <el-dropdown-item icon="el-icon-edit-outline" divided :command="2">密码修改</el-dropdown-item>
              <el-dropdown-item icon="el-icon-right" divided :command="3" >退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>
<script>
import {mapState , mapActions} from "vuex";
    export default{
      data(){
        return{
        }
      },
      computed:{
        ...mapState({
          user:(state)=>{
            return state.adminModule.user
          }
        })
      },
    methods:{
      ...mapActions(["loginOut"]),
      handUser(value){
        // console.log(value)
        if(value=="1"){
          this.$router.push("/index/userinfo")
        }
        if(value=="2"){
             this.$router.push("/index/passwords")
        }
        if(value=="3"){
          this.$store.dispatch('loginOut')
        }
    } 
    }
  }
    
</script>
<style scoped lang="less">
  .box_head{
    span{
     .el-avatar{
       margin-top: 5px;
     }
    }
  }
</style>
